<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>Hello H5+</title>
		<script type="text/javascript" src="../js/common.js"></script>
		  <script src="../js/mui.min.js"></script>
    	<script src="../js/binaryajax.js" type="text/javascript" charset="utf-8"></script>
    	<script src="../js/exif.js" type="text/javascript" charset="utf-8"></script>
    	<script src="../js/canvasResize.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/tiza.js"></script>
		 <script src="../js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		 mui.init();
var files=[];
// 拍照添加文件
function appendByCamera(){	
	var cmr = plus.camera.getCamera();
                cmr.captureImage(function(p) {
                    plus.io.resolveLocalFileSystemURL(p, function(entry) {
                        var localurl = entry.toLocalURL(); //把拍照的目录路径，变成本地url路径，例如file:///........之类的。
                        appendFile(localurl);
                    });
                }, function(e) {
                    mui.toast("很抱歉，获取失败 "+e);
                });
}
// 从相册添加文件
function appendByGallery(){
	plus.gallery.pick(function(p){
        appendFile(p);
    });
}
 var f1 = new Array();
 
function showImg(url) {
	if(f1.length>1){
		mui.toast("仅支持上传两张图片！");
		return null;
	}
	plus.nativeUI.showWaiting();
    // 兼容以“file:”开头的情况
    if (0 != url.toString().indexOf("file:///")) {   	
        url = "file://" + url;
      }
    var _div_ = document.getElementsByClassName("showimg")[0];
    var _img_ = new Image();
    _img_.src = url; // 传过来的图片路径在这里用。
        _img_.onclick = function() {
                plus.runtime.openFile(url);
            };
    _img_.onload = function() {
        var tmph = _img_.height;
        var tmpw = _img_.width;
        var isHengTu = tmpw > tmph;
        var max = Math.max(tmpw, tmph);
        var min = Math.min(tmpw, tmph);
        var bili = min / max;
        if (max > 1200) {
            max = 1200;
            min = Math.floor(bili * max);
        }
        tmph = isHengTu ? min : max;
        tmpw = isHengTu ? max : min;
        _img_.style.border = "1px solid rgb(200,199,204)";
        _img_.style.margin = "10px";
        _img_.style.width = "150px";
        _img_.style.height = "150px";
        _img_.onload = null;
        plus.io.resolveLocalFileSystemURL(url, function(entry) {
                entry.file(function(file) {
                    console.log(file.size + '--' + file.name);
                    canvasResize(file, {
                        width: tmpw,
                        height: tmph,
                        crop: false,
                        quality: 100, //压缩质量
                        rotate: 0,
                        callback: function(data, width, height) {
                            f1.push(data);
                            console.log(data.toString());
                            _img_.src = data;
                            _div_.appendChild(_img_);
                            plus.nativeUI.closeWaiting();
                        }
                    });
                });
            },
            function(e) {
                plus.nativeUI.closeWaiting();
                console.log(e.message);
            });
    };
};

function uploadpics(url){
	var img=new Image();
	img.src=url;
	img.onload=function(){
		
		var that=img;
		var w=that.width,
		h=that.height,
		scale=w/h;
		w=320||w;
		h=w/scale;
		var canvas=document.createElement('canvas');
		var ctx=canvas.getContext('2d');
		$(canvas).attr({
			width:w,
			height:h
		})
		ctx.drawImage(that,0,0,w,h);
		var base64=canvas.toDataURL('image/jpeg',1||0.8);
		f1.push(base64);
		alert(11);
		 console.log(base64.toString());
	}
	
}




// 添加文件
var index=1;
function appendFile(p){
		
//	var fe=document.getElementById("files");
//	var li=document.createElement("li");
//	var n=p.substr(p.lastIndexOf('/')+1);
//	li.innerText=n;
//	fe.appendChild(li);
//	files.push({name:"uploadkey"+index,path:p});
//	index++;
	empty.style.display="none";
	showImg(p);
	//uploadpics(p);
	
}
// 产生一个随机数
function getUid(){
	return Math.floor(Math.random()*100000000+10000000).toString();
}
function imgupload() {
	if(f1.length<=0){
		plus.nativeUI.alert("没有添加上传文件！");
		return;
	}
        	plus.nativeUI.showWaiting();
        	tiza.ajax("FileUpload/Upload",{
					traditional :true, 
					type: "post",	
					data:{"FileArr":f1.toString()},
					dataType:"json",
					success:function(resule){
						
						if (resule.Code == "20000") {
							
							plus.nativeUI.closeWaiting();
							mui.toast(resule.Msg);
							//跳转到首页
							mui.openWindow({
								url: 'media-list.html',
								id: 'media'
							});
						}else{
							plus.nativeUI.closeWaiting();
							mui.toast(resule.msg);
						}
					}
				});      	
}
		</script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
	<link rel="stylesheet" href="../css/mui.min.css">
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" onclick="back(true);"></a>

			<h1 class="mui-title">工程列表</h1>
			
		</header>	
		<!--<header id="header" class="mui-bar mui-bar-nav">
		 <div class="nvbt iback" onclick="back(true);"></div>
			<div class="nvtt">Uploader</div>

		</header>-->
		<div id="dcontent" class="dcontent">
			<br/>
			<p class="heading">上传文件列表：</p>
			<ul id="files" style="text-align:left;">
				<p id="empty" style="font-size:12px;color:#C6C6C6;">无上传文件</p>
			</ul>
			  <div class="showimg" >

            </div>
			<table style="width:100%;">
				<tbody>
					<tr>
						<td style="width:40%"><div class="button button-select" onclick="appendByCamera()">拍照</div></td>
						<td style="width:40%"><div class="button button-select" onclick="appendByGallery()">相册选取</div></td>
					</tr>
				</tbody>
			</table>
			<br/>
			<div class="button" onclick="imgupload()">上 传</div>
			<br/>
			<!--<ul class="dlist">
				<li class="ditem" onclick="appendByCamera()">拍照添加文件</li>
				<li class="ditem" onclick="appendByGallery()">相册添加文件</li>
			</ul>-->
		</div>
		<div id="output">
Uploader用于管理文件的上传，用于从本地上传各种文件到网络服务器，支持跨域访问操作。
		</div>
	</body>
	<script type="text/javascript" src="../js/immersed.js" ></script>
</html>